<template>
  <!-- 订单列表组件 -->
  <div class="orders-list">
    <!-- 头部路径导航 -->
    <el-breadcrumb separator-class="el-icon-arrow-right">
      <el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
      <el-breadcrumb-item>订单管理</el-breadcrumb-item>
      <el-breadcrumb-item>订单列表</el-breadcrumb-item>
    </el-breadcrumb>

    <!-- 内容区 -->
    <el-card class="box-card">
      <el-row>
        <el-col :span="8">
          <div class="grid-content search-container">
            <el-input
              placeholder="请输入内容"
              v-model="searchCont"
              clearable
              class="search-input"
              @clear="searchClear"
            >
            </el-input>
            <el-button
              type="info"
              plain
              icon="el-icon-search"
              @click="getOrders"
            ></el-button>
          </div>
        </el-col>
      </el-row>
      <!-- 订单列表模板 -->
      <div class="order-table">
        <el-table :data="orderList" border stripe style="width: 100%">
          <el-table-column type="index" label="#" width="48"></el-table-column>
          <el-table-column
            prop="order_number"
            label="订单编号"
          ></el-table-column>
          <el-table-column prop="order_price" label="订单价格">
          </el-table-column>
          <el-table-column label="是否付款">
            <template slot-scope="props">
              <el-tag
                effect="dark"
                size="mini"
                v-if="props.row.pay_status == 1"
              >
                已付款
              </el-tag>
              <el-tag
                type="danger"
                size="mini"
                effect="dark"
                v-if="props.row.pay_status == 0"
              >
                未付款
              </el-tag>
            </template>
          </el-table-column>
          <el-table-column label="支付方式" width="100">
            <template slot-scope="props">
              <i
                class="iconfont icon-umidd17"
                style="color: #1296db"
                v-if="props.row.order_pay == 1"
              ></i>
              <i
                class="iconfont icon-weixin"
                style="color: #4cbf00"
                v-if="props.row.order_pay == 2"
              ></i>
              <i
                class="iconfont icon-yinlian"
                v-if="props.row.order_pay == 3"
              ></i>
            </template>
          </el-table-column>
          <el-table-column label="是否发货" prop="is_send" width="100">
          </el-table-column>
          <el-table-column label="下单时间">
            <template slot-scope="props">
              {{ props.row.create_time | formatTime("yyyy-MM-dd hh:mm:ss") }}
            </template>
          </el-table-column>
          <el-table-column label="更新时间">
            <template slot-scope="props">
              {{ props.row.update_time | formatTime("yyyy-MM-dd hh:mm:ss") }}
            </template>
          </el-table-column>
          <el-table-column label="操作" width="180">
            <template slot-scope="scope">
              <el-tooltip
                class="item"
                effect="dark"
                content="修改订单状态"
                placement="top"
              >
                <el-button
                  type="warning"
                  size="mini"
                  icon="el-icon-setting"
                  @click="editOrder(scope.row.order_id)"
                ></el-button>
              </el-tooltip>
              <el-tooltip
                class="item"
                effect="dark"
                content="修改订单地址"
                placement="top"
              >
                <el-button
                  type="primary"
                  size="mini"
                  icon="el-icon-edit"
                  @click="editAddress(scope.row.order_id)"
                ></el-button>
              </el-tooltip>
              <el-tooltip
                class="item"
                effect="dark"
                content="物流信息"
                placement="top"
              >
                <el-button
                  size="mini"
                  type="success"
                  icon="el-icon-location-outline"
                  @click="viewLogistics(scope.row.order_id)"
                ></el-button>
              </el-tooltip>
            </template>
          </el-table-column>
        </el-table>
      </div>
      <!-- 分页器 -->
      <div class="pagination">
        <el-pagination
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          :current-page="pageConfig.currentPage"
          :page-sizes="pageConfig.pageSizes"
          :page-size="pageConfig.pageSize"
          layout="total, sizes, prev, pager, next, jumper"
          :total="pageConfig.pageTotal"
          :hide-on-single-page="false"
        >
        </el-pagination>
      </div>
    </el-card>

    <!-- 修改订单状态 -->
    <el-dialog
      title="修改地址"
      :visible.sync="dialogConfig.dialogEditOrderVisible"
    >
      <el-form
        :model="editOrderForm"
        :rules="editOrderFormRules"
        ref="editOrderForm"
        label-width="100px"
        class="demo-ruleForm"
      >
        <el-form-item label="订单编号：" prop="number">
          <el-input v-model="editOrderForm.number" :disabled="true"></el-input>
        </el-form-item>
        <el-form-item label="订单价格：" prop="price">
          <el-input v-model.trim="editOrderForm.price"></el-input>
        </el-form-item>
        <el-form-item label="是否付款：" prop="payStatus">
          <el-select v-model="editOrderForm.payStatus" placeholder="请选择">
            <el-option
              v-for="item in editOrderForm.payStatusList"
              :key="item.id"
              :label="item.label"
              :value="item.value"
            >
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="支付方式：" prop="payWay">
          <el-select v-model="editOrderForm.payWay" placeholder="请选择">
            <el-option
              v-for="item in editOrderForm.payWayList"
              :key="item.id"
              :label="item.label"
              :value="item.value"
            >
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="是否发货：" prop="isSend">
          <el-select v-model="editOrderForm.isSend" placeholder="请选择">
            <el-option
              v-for="item in editOrderForm.isSendList"
              :key="item.id"
              :label="item.label"
              :value="item.value"
            >
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item style="text-align: right">
          <el-button @click="dialogConfig.dialogEditOrderVisible = false"
            >取消</el-button
          >
          <el-button type="primary" @click="editOrderSubmit('editOrderForm')"
            >确定</el-button
          >
        </el-form-item>
      </el-form>
    </el-dialog>

    <!-- 编辑收获地址 -->
    <el-dialog
      title="修改地址"
      :visible.sync="dialogConfig.dialogAddressVisible"
      @close="closeAddressDialog"
    >
      <el-form
        :model="editAddressForm"
        :rules="editAddressFormRules"
        ref="editAddressForm"
        label-width="100px"
        class="demo-ruleForm"
      >
        <el-form-item label="省市区/县" prop="city">
          <el-cascader
            :options="editAddressForm.city"
            :props="editAddressForm.casProps"
            ref="editAddressCascader"
            clearable
            style="width: 100%"
            popper-class="cat-cascader"
          >
          </el-cascader>
        </el-form-item>
        <el-form-item label="详细地址：" prop="detail">
          <el-input v-model="editAddressForm.detail"></el-input>
        </el-form-item>

        <el-form-item style="text-align: right">
          <el-button @click="dialogConfig.dialogAddressVisible = false"
            >取消</el-button
          >
          <el-button type="primary" @click="editAddressSubmit()"
            >确定</el-button
          >
        </el-form-item>
      </el-form>
    </el-dialog>

    <!-- 物流信息 -->
    <el-dialog
      title="物流进度"
      :visible.sync="dialogConfig.dialogLogisticsVisible"
      class="logistics-dialog"
    >
      <div class="block">
        <el-timeline>
          <el-timeline-item
            v-for="(activity, index) in logisticsInfo"
            :key="index"
            :icon="index == 0 ? 'el-icon-location-outline' : ''"
            :type="index == 0 ? 'success' : ''"
            :timestamp="activity.ftime"
          >
            {{ activity.context }}
          </el-timeline-item>
        </el-timeline>
      </div>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogConfig.dialogLogisticsVisible = false"
          >取 消</el-button
        >
        <el-button
          type="primary"
          @click="dialogConfig.dialogLogisticsVisible = false"
          >确 定</el-button
        >
      </div>
    </el-dialog>
  </div>
</template>

<script>
//导入全国省市区数据
import provinces from "../../plugins/city_data2017_element";

//价格验证
var checkPrice = (rule, value, callback) => {
  if (!value) {
    callback(new Error("请输入价格"));
  } else {
    if (isNaN(value) || value < 0) {
      callback(new Error("请输入正确的价格"));
    } else {
      callback();
    }
  }
};

export default {
  data() {
    return {
      searchCont: "", //搜索内容
      //订单列表
      orderList: [],
      //订单的物流信息
      logisticsInfo: null,
      //加载层参数配置
      loadingConfig: {
        target: "body",
        fullscreen: true,
        spinner: "el-icon-loading",
        background: "rgba(0, 0, 0, 0.1)",
        text: "拼命加载中",
      },
      //分页器参数配置
      pageConfig: {
        pageTotal: 0, //分页器总条数
        pageSize: 10, //每页显示条数
        pageSizes: [10, 15, 20, 25], //可选择的每页条数
        currentPage: 1, //分页器当前页码
      },
      //弹出层配置
      dialogConfig: {
        dialogLogisticsVisible: false,
        dialogAddressVisible: false,
        dialogEditOrderVisible: false,
      },
      //编辑收货地址数据
      editAddressForm: {
        city: null,
        detail: "",
        //级联菜单属性
        casProps: {
          expandTrigger: "hover",
          value: "value",
          label: "label",
        },
      },
      //修改地址表单验证
      editAddressFormRules: {
        city: [{ required: true, message: "请选择收货地址", trigger: "blur" }],
        detail: [
          { required: true, message: "请输入详细地址", trigger: "blur" },
        ],
      },
      //修改订单表单数据
      editOrderForm: {
        //订单ID
        id: null,
        //订单编号
        number: "",
        //订单价格
        price: 0,
        //是否付款
        payStatus: 0,
        //支付方式
        payWay: "0",
        //是否发货
        isSend: 0,
        isSendList: [
          {
            id: 1,
            value: 1,
            label: "已发货",
          },
          {
            id: 2,
            value: 0,
            label: "未发货",
          },
        ],
        payStatusList: [
          {
            id: 1,
            value: 0,
            label: "未付款",
          },
          {
            id: 2,
            value: 1,
            label: "已付款",
          },
        ],

        payWayList: [
          {
            id: 1,
            value: "0",
            label: "未支付",
          },
          {
            id: 2,
            value: "1",
            label: "支付宝",
          },
          {
            id: 3,
            value: "2",
            label: "微信支付",
          },
          {
            id: 4,
            value: "3",
            label: "银联支付",
          },
        ],
      },
      //修改订单表单验证
      editOrderFormRules: {
        number: [
          { required: true, message: "请输入订单编号", trigger: "blur" },
        ],
        price: [{ validator: checkPrice, required: true, trigger: "change" }],
        payStatus: [
          { required: true, message: "请选择订单是否付款", trigger: "blur" },
        ],
        payWay: [
          { required: true, message: "请选择订单支付方式", trigger: "blur" },
        ],
        isSend: [
          { required: true, message: "请选择订单是否发货", trigger: "blur" },
        ],
      },
    };
  },
  methods: {
    getOrders() {
      //获取订单列表
      //打开加载层
      var loading = this.$loading.service(this.loadingConfig);
      //发起请求
      this.$axios
        .get("/orders", {
          params: {
            query: this.searchCont,
            pagenum: this.pageConfig.currentPage,
            pagesize: this.pageConfig.pageSize,
          },
        })
        .then((res) => {
          if (res.meta.status == 200) {
            //为每条数据添加索引值
            res.data.goods.forEach((item, index) => {
              item.index = index + 1;
            });
            this.orderList = res.data.goods;
            this.pageConfig.pageTotal = res.data.total;
            this.pageConfig.currentPage = parseInt(res.data.pagenum);
          } else {
            //提示错误信息
            this.$message.error(res.meta.msg);
          }
        })
        .catch((error) => {
          //请求失败
          this.$message.error(error);
        })
        .finally(() => {
          //关闭加载层
          this.$nextTick(() => {
            loading.close();
          });
        });
    },
    editAddress() {
      //修改订单地址
      this.dialogConfig.dialogAddressVisible = true;
    },
    editAddressSubmit() {
      //修改订单地址提交
    },
    editOrder(id) {
      //修改订单状态
      //打开加载层
      var loading = this.$loading.service(this.loadingConfig);
      //根据订单ID查询信息
      this.$axios
        .get("/orders/" + id)
        .then((res) => {
          if (res.meta.status == 200) {
            //设置对应数据
            this.editOrderForm.id = id;
            this.editOrderForm.number = res.data.order_number;
            this.editOrderForm.price = res.data.order_price;
            this.editOrderForm.payStatus = parseInt(res.data.pay_status);
            this.editOrderForm.payWay = res.data.order_pay;
            if (res.data.is_send == "是") {
              this.editOrderForm.isSend = 1;
            } else {
              this.editOrderForm.isSend = 0;
            }
            //打开弹出层
            this.dialogConfig.dialogEditOrderVisible = true;
          } else {
            //提示错误信息
            this.$message.error(res.meta.msg);
          }
        })
        .catch((error) => {
          //请求失败
          this.$message.error(error);
        })
        .finally(() => {
          //关闭加载层
          this.$nextTick(() => {
            loading.close();
          });
        });
    },
    editOrderSubmit(forName) {
      //修改订单状态提交
      this.$refs[forName].validate((valid) => {
        if (valid) {
          //打开加载层
          var loading = this.$loading.service(this.loadingConfig);
          //发起请求
          this.$axios
            .put("/orders/" + this.editOrderForm.id, {
              is_send: this.editOrderForm.is_send,
              order_pay: this.editOrderForm.payWay,
              order_price: parseFloat(this.editOrderForm.price),
              order_number: this.editOrderForm.number,
              pay_status: this.editOrderForm.payStatus,
            })
            .then((res) => {
              if (res.meta.status == 201) {
                //提示成功信息
                this.$message.success(res.meta.msg);
                //关闭弹出层
                this.dialogConfig.dialogEditOrderVisible = false;
                //重新刷新数据
                this.getOrders();
              } else {
                //提示错误信息
                this.$message.error(res.meta.msg);
              }
            })
            .catch((error) => {
              //请求失败
              this.$message.error(error);
            })
            .finally(() => {
              //关闭加载层
              this.$nextTick(() => {
                loading.close();
              });
            });
        }
      });
    },
    closeAddressDialog() {
      this.$refs["editAddressCascader"].handleClear();
      this.editAddressForm.detail = "";
    },
    viewLogistics(id) {
      //查看物流信息
      //打开加载层
      var loading = this.$loading.service(this.loadingConfig);
      //发起请求
      this.$axios
        .get(
          "https://www.liulongbin.top:8888/api/private/v1/kuaidi/1106975712662"
        )
        .then((res) => {
          if (res.meta.status == 200) {
            console.log(res);
            this.logisticsInfo = res.data;
            this.dialogConfig.dialogLogisticsVisible = true;
          } else {
            //提示错误信息
            this.$message.error(res.meta.msg);
          }
        })
        .catch((error) => {
          //请求失败
          this.$message.error(error);
        })
        .finally(() => {
          //关闭加载层
          this.$nextTick(() => {
            loading.close();
          });
        });
    },
    handleSizeChange(val) {
      //切换每页条数重新获取数据
      this.pageConfig.pageSize = val;
      this.getOrders();
    },
    handleCurrentChange(val) {
      //切换页码时重新获取数据
      this.pageConfig.currentPage = val;
      this.getOrders();
    },
    searchClear() {
      //清空搜索栏
      this.searchCont = "";
      //重新获取数据
      this.getOrders();
    },
  },
  mounted() {
    //模板挂载完成后渲染数据
    this.editAddressForm.city = provinces;
    this.getOrders();
  },
};
</script>

<style lang="less">
.order-table {
  .el-table {
    margin-top: 15px;
  }
}
</style>